/**
 * Created by Junchuan.Wu on 2015/11/20 0020.
 */
/**
 * 经测试，IE11进度条可以使用,主要基于Chrome测试，Chrome兼容性较好。Firefox进度条无法使用.
 *
 */
/*页面加载完成后再执行代码*/
var play,//播放
    forward,//快放
    back,//慢放
    up,//增大音量
    down,//降低音量
    silent,//静音
    rate,//播放速度
    volum,//音量
    fullScreen,//全屏
    current,//当前时间
    duration,//总时间
    videoProgress,//进度条
    video;//视频
/*
 * 获取按钮对象
 */
play = document.getElementById("btn_play"); //播放与暂停
forward = document.getElementById("btn_forward");
back = document.getElementById("btn_back");
up = document.getElementById("btn_up");
down = document.getElementById("btn_down");
silent = document.getElementById("btn_silent");
rate = document.getElementById("rate"); //播放速度
volum = document.getElementById("volum"); //音量大小
fullScreen = document.getElementById("btn_fullScreen");
current = document.getElementById("current");
duration = document.getElementById("duration");
videoProgress = document.getElementById("videoProgress");
/*
 * 获取video对象
 */
video = document.getElementById("myvideo");
init();
/*
 * 添加监听事件
 */
play.addEventListener("click", function () {
    //点击播放
    if (video.paused) {
        video.play();
        play.innerText = "暂停";
    } else {
        video.pause();
        play.innerText = "播放";
    }
}, false);
document.getElementById("close-modal-video").addEventListener("click", function () {
    if (video.paused) {

    } else {
        video.pause();
        play.innerText = "播放";
    }
}, false);
forward.addEventListener("click", function () {
    //点击快放
    video.playbackRate += 0.1;
    rate.innerText = video.playbackRate;

}, false);
back.addEventListener("click", function () {
    //点击慢放
    video.playbackRate -= 0.1;
    rate.innerText = video.playbackRate;
}, false);
up.addEventListener("click", function () {
    //增大音量
    if (video.volume >= 0.99) {
        up.setAttribute("disabled", "disabled");
    } else {
        video.volume += 0.1;
        down.removeAttribute("disabled");
        volum.innerText = video.volume;
    }
}, false);
down.addEventListener("click", function () {
    //减少音量
    if (video.volume < 0.1) {
        down.setAttribute("disabled", "disabled");
    } else {
        video.volume -= 0.1;
        up.removeAttribute("disabled");
        volum.innerText = video.volume;
    }

}, false);
silent.addEventListener("click", function () {
    //静音
    if (video.muted) {//如果已经是静音
        video.muted = false;
        silent.innerHTML = "静音";
        volum.innerText = video.volume;
    } else {//如果不是静音
        video.muted = true;
        silent.innerHTML = "取消静音";
        volum.innerText = "静音";
    }
}, false);
fullScreen.addEventListener("click", function () {
    //for webkit
    if (!document.webkitIsFullScreen) {
        video.webkitRequestFullScreen();//全屏
    }
}, false);
//获取总时长
video.addEventListener("loadedmetadata", function () {
    duration.innerHTML = video.duration;
});
//获取当前播放时间
video.addEventListener("timeupdate", function () {
    var currentPos = video.currentTime;
    current.innerHTML = convertTime(currentPos);
    var maxduration = video.duration;
    var percentage = 100 * currentPos / maxduration;
    videoProgress.setAttribute("value", percentage);
    console.log(videoProgress);
}, false);
//获取进度条的进度
videoProgress.addEventListener("click", function (event) {
    var w = 600;
    var x = event.offsetX;
    var duration = video.duration;
    video.currentTime = (x / w) * duration;
}, false);
function init() {
    rate.innerText = video.playbackRate;
    volum.innerText = video.volume;
}

/**
 * 打开本地文件并且播放
 */
$upload = $("#upload");
$file = $("#file");
$upload.on('click', function () {
    $file.trigger('click');
});
$file.on('change', function (e) {
    var file = e.target.files[0],
        canPlayType = video.canPlayType(file.type);
    if (canPlayType === 'maybe' || canPlayType === 'probably') {
        src = window.URL.createObjectURL(file);
        video.src = src;
        $play_ = $(play);//为了实现自动播放
        $play_.trigger('click');//自动播放
        video.onload = function () {
            window.URL.revokeObjectURL(src);
        };
    } else {
        alert("浏览器不支持你所选择的文件格式");
    }
});
/**
 * 文件拖放的功能
 */
var elem = document.getElementById("modal-body");
elem.addEventListener("drop", function (e) {
    e.stopPropagation();
    e.preventDefault();
    var files = e.dataTransfer.files;
    var file = files[0];
    canPlayType = video.canPlayType(file.type);
    if (canPlayType === 'maybe' || canPlayType === 'probably') {
        src = window.URL.createObjectURL(file);
        video.src = src;
        $play_ = $(play);//为了实现自动播放
        $play_.trigger('click');//自动播放
        video.onload = function () {
            window.URL.revokeObjectURL(src);
        };
    } else {
        alert("浏览器不支持你所选择的文件格式");
    }
}, false);
elem.addEventListener("dragover", function (e) {
    e.stopPropagation();
    e.preventDefault();
}, false);
/**
 * 视频时间转换为时分秒
 * @param time
 * @returns {string}
 */
function convertTime(time){
    var h,//hour
        m,//minute
        s;//second
    h = String(parseInt(time / 3600, 10));
    if(h.length==1) {
        h = '0' + h;
    }
    m = String(parseInt((time % 3600) / 60, 10));
    if(m.length==1) {
        m = '0' + m;
    }
    s = String(parseInt(time % 60), 10);
    if(s.length==1) {
        s = '0' + s;
    }
    return h + ':' + m + ':' + s;
}
